<template>
  <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
    <el-radio-button :value="false">expand</el-radio-button>
    <el-radio-button :value="true">collapse</el-radio-button>
  </el-radio-group> -->
  <el-icon
      :size="20"
      :style="{
      left: isCollapse ? '35%' : '85%',
      transform: isCollapse ? 'rotateY(180deg)' : 'none',
      cursor: 'pointer'
    }"
      @click="isCollapse = !isCollapse"
  ><Fold
  /></el-icon>
  <el-menu
      :default-active="editableTabsValue"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      :unique-opened="true"
      @select="selectMenu"
  >
    <template v-for="(item, index) in menus" :key="index">
      <el-sub-menu v-if="item.children.length > 0" :index="item.routerPath">
        <template #title>
          <el-icon><component :is="item.icon ? item.icon : null" /></el-icon>
          <span>{{ item.name }}</span>
        </template>
        <el-menu-item-group v-if="item.children">
          <el-menu-item
              v-for="(item2, index2) in item.children"
              :key="index2"
              :index="item2.routerPath"
          >
            <el-icon><component :is="item2.icon ? item2.icon : null" /></el-icon
            >{{ item2.name }}</el-menu-item
          >
        </el-menu-item-group>
      </el-sub-menu>
      <el-menu-item v-else :index="item.routerPath">
        <template #title>
          <el-icon><component :is="item.icon ? item.icon : null" /></el-icon>
          <span>{{ item.name }}</span>
        </template>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import { usePageTabStore } from '@/stores/pageTab'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
const isCollapse = ref(false)
const router = useRouter()
const store = usePageTabStore()
const { editableTabsValue } = storeToRefs(store)
const menus = ref([])
// 选择菜单
function selectMenu(index) {
  console.log('index', index)
  const route = router.resolve(index)
  store.add(route.name, index)
}

onBeforeMount(() => {
  // console.log('获取菜单')
  // api
  //   .getApi('FaSysMenuView')
  //   .menuTree()
  //   .then((data) => {
  //     menus.value = data.data
  //     addRouter(menus.value)
  //   })
  //   .catch((err) => {
  //     console.log('err', err)
  //   })
  menus.value = JSON.parse(sessionStorage.getItem('menuTree'))
})
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 180px;
  min-height: 400px;
}
</style>
